<template>
  <el-form-item :label="data.label ? data.label+'：' : '' " v-if="!data.hasOwnProperty('hide')&&!data.hide" :class="!data.label ? 'label-margin-none' :''">
    <!-- 【input】输入框 -->
    <el-input v-model="_value" :placeholder="data.placeholder" v-if="data.type=='input'"></el-input>
    <!-- 【textarea】文本域 -->
    <el-input type="textarea" v-model="_value" :placeholder="data.placeholder" v-if="data.type=='textarea'"></el-input>
    <!-- 【select】下拉选择 -->
    <el-select v-model="_value" :placeholder="data.placeholder" v-if="data.type=='select'" clearable>
      <el-option :label="_item.label" :value="_item.value" v-for="_item,_index in data.option" :key="_index"></el-option>
    </el-select>
    <!-- 【date】日期选择 -->
    <el-date-picker type="date" v-model="_value" :placeholder="data.placeholder" v-if="data.type=='date'"> </el-date-picker>
    <!-- 【daterang】日期范围 -->
    <el-date-picker v-if="data.type=='daterange'" v-model="_value" type="daterange" :range-separator="data.range" :start-placeholder="data.start" :end-placeholder="data.end" class="_value-width"></el-date-picker>
    <!-- 【time】时间选择 -->
    <el-time-picker v-model="_value" :placeholder="data.placeholder" v-if="data.type=='time'"></el-time-picker>
    <!-- 【datetimerange】时间段选择 -->
    <el-date-picker type="datetimerange" v-model="_value" :placeholder="data.placeholder" v-if="data.type=='datetimerange'" :range-separator="data.range" :start-placeholder="data.start" :end-placeholder="data.end">
    </el-date-picker>
    <!-- 【switch】操作开关 -->
    <el-switch v-model="_value" v-if="data.type=='switch'" :active-value="data.activeValue || true " :inactive-value="data.inactiveValue || false "></el-switch>
    <!-- 【checkbox】多选按钮 -->
    <el-checkbox-group v-model="datalist" v-if="data.type=='checkbox'">
      <el-checkbox :label="_item.value" :name="data.field" v-for="_item,_index in data.option" :key="_index">{{_item.label}}</el-checkbox>
    </el-checkbox-group>
    <!-- 【radio】单选按钮 -->
    <template v-if="data.type=='radio'">
      <el-radio-group v-if="data.theme == 'button'" v-model="_value">
        <el-radio-button :label="_item.value" v-for="_item,_index in data.option" :key="_index">{{_item.label}}</el-radio-button>
      </el-radio-group>
      <el-radio-group v-else v-model="_value" :border="data.border || false">
        <el-radio :label="_item.value" v-for="_item,_index in data.option" :key="_index">{{_item.label}}</el-radio>
      </el-radio-group>
    </template>

    <!-- 按钮 -->
    
  </el-form-item>
</template>
<script type="text/javascript">
export default {
  props: {
    value: [Array, Object,String,Number],
    data: [Array, Object],
  },
  data() {
    return {
        datalist:[],
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    _value: {
      get() {
        return this.value;
      },
      set(data) {
        this.$emit('input', data);
      }
    }
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
    datalist:function(val,old){
      this._value = val;
    }
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {

  }
}

</script>
<style type="text/css" lang="scss">
.el-date-editor{
  width: 100% !important;
}
.el-radio{
  margin-right:5px;
}
.label-margin-none{
  .el-form-item__content{
    margin-left:0px !important;
  }
}
.el-checkbox{
  margin-right:5px;
}
</style>
